<template>
	<view class="content" style="width: 100%;">
		<QSInput :name="formName" variableName="userName" title="账号" required v-model="form.userName"
		 titleLayout="left" required></QSInput>
		<QSInput :name="formName" variableName="phone" title="手机号" leftIcon="phone" verifyType="Tel" v-model="form.phone"
		 titleLayout="left" required></QSInput>
		<QSInput ref="code" :name="formName" variableName="code" title="验证码" ifCode v-model="form.code" :phoneNum="form.phone"
		 required checkPhoneNum @getCode="getCode" titleLayout="left"></QSInput>
		<QSInput :name="formName" variableName="password" title="新密码" v-model="form.password" verifyType="password"
		 titleLayout="left" password="true" required></QSInput>
		<QSInput :name="formName" variableName="chpassword" title="确认密码" v-model="form.chpassword" titleLayout="left"
		 password="true" required></QSInput>
		<!-- 登录提交 -->
		<button class="submit" type="primary" @tap="toSubmit">提交</button>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import QSApp from '@/components/QS-inputs-split/js/app.js';
	export default {
		computed: mapState([, 'baseUrl']),
		data() {
			return {
				formName: 'pwd',
				form: {
					userName:null,
					phone: null,
					code: null,
					password: null,
					chpassword: null
				}
			};
		},
		methods: {
			toSubmit() {
				QSApp.getForm(this.formName).then(res => {
					if (res.verifyErr.length != 0) {
						if (!res.verifyErr[0].result) {
							if (res.verifyErr[0].title == '新密码') {
								QSApp.showToast('密码不能少于6位');
								return
							} else if(res.verifyErr[0].title == '账号') {
								QSApp.showToast('账号不能为空');
								return
							}else{
								QSApp.showToast(res.verifyErr[0].title + '输入格式有误');
								return
							}
						}
					}
					if (res.data.password != res.data.chpassword) {
						QSApp.showToast('两次输入的密码不一致');
						return
					}

					uni.showLoading({
						title: "正在提交..."
					})
					uni.request({
						url: this.baseUrl + "api/sys/user/sms/password",
						method: "POST",
						data: JSON.stringify(this.form),
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 200) {
								uni.showToast({
									title: '密码修改成功',
									icon: "none",
									duration: 3000
								})
								this.toFaceLogin()
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.data.desc,
									icon: "none",
									duration: 3000
								})
							}
						},
						fail() {
							uni.hideLoading()
							uni.showToast({
								title: "提交失败",
								icon: "none",
								duration: 3000
							})
						}
					})

				}).catch(err => {});
			},
			getCode() {
				uni.request({
					url: this.baseUrl + "api/sys/user/sms/code?phone=" + this.form.phone,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.$refs.code.startCode();
						} else {
							uni.showToast({
								title: res.data.desc,
								icon: "none",
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "获取验证码失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			toFaceLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}

		}
	}
</script>

<style scoped>
	.submit {
		margin-top: 30px;
		margin-left: 20px;
		margin-right: 20px;
		color: white;
		background-color: #2F85FC;
		-webkit-tap-highlight-color: #2F85FC;
	}
</style>
